import './Environmental.scss'
import { Select } from 'antd'
import { useState, useEffect, useRef } from 'react'
import { useMount, useRequest, useSize } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { CommonSmallTitle } from '../Common/SmallTitle'
import { ICON } from '../../../../Common/Configure/Icon'
import { NoiseGauge, AreaStyle, AreaEnvironment, GaugeA02Template, GaugeStyle } from './AssetsCharts'

const LeftList = [
    { uuid: 1, title: '温度', value: 'temperature', unit: '°C', icon: ICON['wendu'] },
    { uuid: 2, title: '湿度', value: 'humidity', unit: '%RH', icon: ICON['shidu'] },
    { uuid: 3, title: '风级', value: 'windLevel', unit: '级', icon: ICON['fengji'] },
    { uuid: 4, title: '风向', value: 'windDirection', unit: '', icon: ICON['fengxiang'] },
    { uuid: 5, title: '风速', value: 'windSpeed', unit: 'm/s', icon: ICON['fengsu'] },
]

const RightList = [
    { uuid: 1, title: '噪音较低', color: '#1FB26C' },
    { uuid: 2, title: '噪音正常', color: '#FFCB4F' },
    { uuid: 3, title: '噪音较大', color: '#F3664A' },
]

const BtmList = [
    { uuid: 1, title: 'PM2.5', value: 'pm25' },
    { uuid: 2, title: 'PM10', value: 'pm10' },
    { uuid: 3, title: '风速', value: 'windSpeed' },
    { uuid: 4, title: '温度', value: 'temperature' },
    { uuid: 5, title: '湿度', value: 'humidity' },
    { uuid: 6, title: '风级', value: 'windLevel' },
]

export const EnvironmentalA01 = () => {
    const NoiseBox = useRef()
    const NoiseSize = useSize(NoiseBox)

    const LineBox = useRef()
    const LineSize = useSize(LineBox)

    const ConBox = useRef()
    const ConSize = useSize(ConBox)

    const { runAsync: getList } = useRequest(Http, { manual: true })
    const { runAsync: getData } = useRequest(Http, { manual: true })
    const { runAsync: getDetails } = useRequest(Http, { manual: true })

    const [options, setOptions] = useState()
    const [Active, setActive] = useState()
    const [Data, setData] = useState({
        temperature: 0,
        humidity: 0,
        windLevel: 0,
        windDirection: '',
        windSpeed: 0,
        noise: 0,
        pm10: 0,
        pm25: 0,
    })

    const [BtmAct, setBtmAct] = useState('pm25')
    const [Details, setDetails] = useState()

    useMount(() => {
        getList({ url: 'getEnvironmentNameList' }).then(res => {
            setOptions(res.list)
            setActive(res.list[0]?.tableName)
        })
    })

    useEffect(() => {
        if (Active) {
            getData({ url: 'getEnvironmentDataNew', data: { TableName: Active } }).then(res => setData(res))
            getDetails({ url: 'getEnvironmentDetailData', data: { TableName: Active, day: 30 } }).then(res =>
                setDetails(res.list),
            )
        }
    }, [Active, getData, getDetails])

    return (
        <div className="EnvironmentalA01">
            <div className="Top">
                <CommonSmallTitle title="空气质量数值" flex={455}>
                    <div className="Left">
                        {LeftList.map(({ uuid, title, value, unit, icon }) => (
                            <div key={uuid}>
                                {icon}
                                <div>{title}</div>
                                <div>{Data[value]}</div>
                                <div>{unit}</div>
                            </div>
                        ))}
                    </div>
                </CommonSmallTitle>
                <div className="content">
                    <div className="Nav">
                        <Select
                            value={Active}
                            options={options}
                            fieldNames={{ label: 'tableName', value: 'tableName' }}
                            onChange={setActive}
                        />
                    </div>
                    <CommonSmallTitle title="环境质量指数" flex={455}>
                        <div className="ConBox" ref={ConBox}>
                            {ConSize && (
                                <div style={{ '--width': ConSize.width }}>
                                    <GaugeA02Template
                                        data={Data.pm25 / 100}
                                        size={{ width: ConSize.width / 2 - 16, height: ConSize.width / 4 - 16 }}
                                        style={{ ...GaugeStyle, title: 'PM2.5', radius: 0.8, Rwidth: 64 }}
                                    />
                                    <GaugeA02Template
                                        data={Data.pm10 / 100}
                                        size={{ width: ConSize.width / 2 - 16, height: ConSize.width / 4 - 16 }}
                                        style={{ ...GaugeStyle, title: 'PM10', radius: 0.8, Rwidth: 64 }}
                                    />
                                </div>
                            )}
                        </div>
                    </CommonSmallTitle>
                </div>
                <CommonSmallTitle title="噪声情况" flex={455}>
                    <div className="Right" ref={NoiseBox}>
                        <div>
                            {RightList.map(({ uuid, title, color }) => (
                                <div className="uuid" key={uuid}>
                                    <div style={{ background: color }} />
                                    <div>{title}</div>
                                </div>
                            ))}
                        </div>
                        {NoiseSize && (
                            <NoiseGauge data={Data.noise} size={NoiseSize} color={['#30BF78', '#FAAD14', '#F4664A']} />
                        )}
                        <div>预警阈值 : 大于100db</div>
                    </div>
                </CommonSmallTitle>
            </div>
            <CommonSmallTitle title="环境趋势分享" flex={455}>
                <div className="Btm">
                    <div className="left">
                        {BtmList.map(({ uuid, title, value }) => (
                            <div
                                key={uuid}
                                className={BtmAct === value ? 'active' : ''}
                                onClick={() => setBtmAct(value)}
                            >
                                {title}
                            </div>
                        ))}
                    </div>
                    <div className="right" ref={LineBox}>
                        {LineSize && Details && (
                            <AreaEnvironment size={LineSize} data={Details} active={BtmAct} style={AreaStyle} />
                        )}
                    </div>
                </div>
            </CommonSmallTitle>
        </div>
    )
}
